<template>
  <div id="videoBox">
    <div class="float-right margin-tb-10">
      <span class="font-size-14">通道：</span>

      <el-select
        v-model="channel.channelSipId"
        placeholder="请选择"
        size="mini"
        @change="change"
      >
        <template v-for="item in channelList">
          <el-option
            :key="item.id"
            :label="item.channelName"
            :value="item.channelSipId"
            v-if="item.status == 3"
          >
            <el-tag v-if="item.status == 3" size="mini">在线</el-tag>
            <span class="margin-left-5 font-size-10">{{
              item.channelName ? `(${item.channelName})`+item.channelSipId : item.channelSipId
            }}</span>
          </el-option>
        </template>
      </el-select>
    </div>
    <single-player
      :video-param="videoParam"
      :width="width"
      class="player"
    ></single-player>
  </div>
</template>

<script>
import { listChannel } from '@/api/iot/channel';
import SinglePlayer from '@/views/components/player/SinglePlayer';
export default {
  name: '',
  mixins: [],
  components: { SinglePlayer },
  props: {
    device: Object,
  },
  data() {
    return {
      channelList: [],
      channel: {
        deviceSipId: '',
        channelSipId: '',
      },
      width: '400px',
    };
  },
  computed: {
    videoParam: function () {
      return {
        deviceId: this.channel.deviceSipId,
        channelId: this.channel.channelSipId,
      };
    },
  },
  watch: {
    device: {
      handler: function (n, o) {
        this.getChannelList();
      },
      deep: true,
    },
  },
  created() {},
  async mounted() {
    let dom = document.getElementById('videoBox');
    this.width = dom.clientWidth - 30 + 'px';
  },
  destroyed() {},
  methods: {
    /** 获取通道列表 */
    async getChannelList() {
      const { rows } = await listChannel({
        deviceSipId: this.device.serialNumber,
      });
      this.channelList = rows;
    },
    /** 选择触发 */
    change(channelSipId) {
      this.channel.deviceSipId = this.device.serialNumber;
      this.channel.channelSipId = channelSipId;
    },
  },
};
</script>
<style lang="scss" scoped>
#videoBox {
  background: #fff;
  height: calc(100vh - 84px - 30px);
  border-radius: 0 10px 10px 0;
  border-left: 1px solid #eee;
  padding: 0 15px;
  overflow: auto;
}
.player {
  height: calc(100vh - 84px - 30px - 81px - 100px);
  width: 100%;
}
</style>
